<template>
  <view class="form flex-direction-column" :style="{ background: bg }">
    <view class="item flex-space-between" v-for="(i, v) in formList" :key="v">
      <view class="label" :class="{ xing: i.prop }"> {{ i.model }} </view>
      <view class="right flex">
        <!-- 单行文本 -->
        <input placeholder-style="color:#bbbbbb;font-size:28rpx" v-if="i.type == 1" v-model="i.value" :placeholder="placeholder(i)" />
        <!-- 多行文本 -->
        <textarea placeholder-style="color:#bbbbbb;font-size:28rpx" v-if="i.type == 2" v-model="i.value" auto-height :placeholder="placeholder(i)"></textarea>
        <!-- 下拉框 -->
        <view class="picker flex" v-if="i.type == 3">
          <picker
            :data-item="{ type: i.type, index: v }"
            :value="i.picker"
            :range="i.child"
            :range-key="i.child[0].label ? 'label' : ''"
            @change="bindPickerChange"
          >
            <view :style="i.value ? 'color:#000' : 'color: #bbbbbb;'">{{ i.value ? i.child[i.value] ?? i.child[i.picker] : placeholder(i) }}</view>
          </picker>
          <image class="arrow" src="../../static/icon/15.png"></image>
        </view>
        <!-- 日期选择器 -->
        <view class="picker flex" v-if="i.type == 4">
          <picker mode="date" :data-item="{ type: i.type, index: v }" :value="i.value" @change="bindPickerChange">
            <view :style="i.value ? 'color:#000' : 'color: #bbbbbb;'">{{ i.value ? i.value : placeholder(i) }}</view>
          </picker>
          <image class="arrow" src="../../static/icon/15.png"></image>
        </view>
        <!-- 时间选择器 -->
        <view class="picker flex" v-if="i.type == 5">
          <picker mode="time" :data-item="{ type: i.type, index: v }" :value="i.value" @change="bindPickerChange">
            <view :style="i.value ? 'color:#000' : 'color: #bbbbbb;'">{{ i.value ? i.value : placeholder(i) }}</view>
          </picker>
          <image class="arrow" src="../../static/icon/15.png"></image>
        </view>
        <!-- 多选 -->
        <view class="group flex-wrap" v-if="i.type == 6">
          <view
            class="group-item flex"
            :style="{ marginBottom: i.child.length > 2 ? '20rpx' : '' }"
            v-for="(ii, vv) in i.child"
            :key="vv"
            @click="checkboxGroup(i, vv)"
          >
            <view class="check">
              <image v-if="ii.choose" class="img" src="../../static/icon/14.png"></image>
			  <!-- <image v-if="isCheckbox(i)!=-1" class="img" src="../../static/icon/14.png"></image> -->
            </view>
            <view class="text">{{ ii.label }}</view>
          </view>
        </view>
        <!-- 单选 -->
        <view class="group flex-wrap" v-if="i.type == 7">
          <view
            class="group-item flex"
            :style="{ marginBottom: i.child.length > 2 || ii.label.length > 4 ? '20rpx' : '' }"
            v-for="(ii, vv) in i.child"
            :key="vv"
            @click="radioGroup(i, vv)"
          >
            <view class="check" :style="{ border: isRadio(i, vv) ? 'none' : '' }">
              <image v-if="isRadio(i, vv)" class="img" src="../../static/icon/14.png"></image>
            </view>
            <view class="text">{{ ii.label }}</view>
          </view>
        </view>
        <!-- 上传图片(OSS) -->
        <view class="upload flex-wrap" v-if="i.type == 9">
          <view class="upload-item flex-center" style="border: none" v-for="(ii, vv) in i.value" :key="vv">
            <image mode="aspectFill" class="img" :src="ii"></image>
            <image class="close" src="/static/icon/21.png" @click="deleteClick(i, vv)"></image>
          </view>
          <view class="upload-item flex-center" v-if="(i.limit ?? 1) != i.value.length" @click="uploadPic(i)">
            <image class="add" src="/static/icon/16.png"></image>
          </view>
        </view>
        <!-- 上传视频(OSS) -->
        <view class="upload flex-wrap" v-if="i.type == 10">
          <view class="upload-item flex-center" style="border: none" v-for="(ii, vv) in i.value" :key="vv">
            <video mode="aspectFill" class="img" :src="ii"></video>
            <image class="close" src="../../static/icon/21.png" @click="deleteClick(i, vv)"></image>
          </view>
          <view class="upload-item flex-center" v-if="i.value.length != (i.limit ?? 1)" @click="uploadVideo(i)">
            <image class="add" src="../../static/icon/16.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
/**
 * 自定义表单
 * @param formList
 *
 * 公共参数
 * 必填：
 * type（Number）表单类型
 * value（String）（内置函数会区分具体数据类型）v-model
 * model（String）表单 label
 *
 * 可选:
 * prop（Boolean） 是否开启校验（默认false）
 * placeholder（String）提示文字（可不填，默认提示文字）
 *
 * type == 1 （单行文本）
 * type == 2 （多行文本）
 *
 * type == 3 （下拉框）
 * 必填参数：
 * child（Array）=> 下拉列表（数组不可为空）
 * child == [{label:'区域一'}]
 *
 * type == 4 日期选择器
 * type == 5 时间选择器
 *
 * type == 6 多选
 * 必填参数：
 * child（Array）=> 多选列表（数组不可为空）
 * child = [{label:'男'}]
 * value（String）=> 默认高亮 ['男']
 *
 * type == 7 单选
 * child（Array）=> 单选列表（数组不可为空）
 * child = [{label:'男'}]
 * value（String）=> 默认高亮 '男'
 *
 * type == 9 （上传图片 OSS）
 * 可选参数：
 * limit（Number） 限制上传个数（可不传默认1）
 *
 * type == 10 （上传视频 OSS）
 * 可选参数：
 * limit（Number） 限制上传个数（可不传默认1）
 *
 **/

import { ref, toRefs } from 'vue'
import { Custom, initData, processData } from '@/typings/custom'
import tools from '@/utils/tools'
import userPinia from '@/store/user'
const user = userPinia()
const userInfo = JSON.parse(user.$state.userInfo)
const emit = defineEmits(['change'])
const props = defineProps({
  formList: {
    type: Array,
    default() {
      return []
    }
  },
  bg: {
    type: String,
    default() {
      return ''
    }
  }
})

let formList = ref([])
formList.value = toRefs(props).formList.value

const params = {
  姓名: 'name',
  手机号: 'mobile',
  性别: 'sex',
  证件号: 'id_card',
  证件类型: 'card_type',
  证件号码: 'id_card',
  出生日期: 'birthday',
  衣服尺码: 'size',
  紧急联系人: 'contacts',
  紧急联系方式: 'contact_no',
  血型: 'blood_type'
}

formList.value.forEach((i: Custom['Tform']['i']) => {
  // 1 单人 2 多人 3 个人中心
  if (tools.getStorage('entryType') == 1) {
    for (const key in params) {
      if (i.model == key) {
		  if(key!='性别'){
			 i.value = userInfo[params[key]]
		  }else{
			  if(userInfo[params[key]]==1){
				  i.value="男"
			  }
			  if(userInfo[params[key]]==2){
			  	  i.value="女"
			  }
		  }
      }
    }
  }

  if (i.value instanceof Array && i.value.length) return processData(i)
  if (i.value) return processData(i) // 回显默认数据
  
  initData(i) // 初始化
})
console.log(formList.value)

// 获取提示文字
const placeholder = (i: Custom['Tplaceholder']['i']) => {
  // 单行文本 多行文本
  if (i.type == 1 || i.type == 2) {
    return i.placeholder ? i.placeholder : '请填写' + i.model
  }
  // 下拉框 日期选择器 时间选择器
  else if (i.type > 2 && i.type < 8) {
    return i.placeholder ? i.placeholder : '请选择' + i.model
  }
  // 上传图片
  else if (i.type == 8) {
    return i.placeholder ? i.placeholder : '请上传' + i.model
  }
}

// 高亮已选（多选）
const isCheckbox = (i: Custom['TisCheckBox']['i']) => {
	// console.log(i);
	// let index=0
	// if(i.value.length>0){
	// 	i.value.forEach(item=>{
	// 		console.log(item);
	// 		index =i.child.findIndex((item2) => item2 == item )
	// 		console.log(index);
	// 		console.log("-----");
	// 		return index
	// 	})
	// }else{
	// 	return -1
	// }
}

// 高亮已选（单选）
const isRadio = (i: Custom['TisRadio']['i'], vv: number) => {
  return i.picker == i.child[vv].label
}

// 多选
const checkboxGroup = (i: Custom['TcheckBoxType']['i'], vv: number) => {
  i.child[vv].choose=!i.child[vv].choose
  let index = i.value.findIndex((item) => item== i.child[vv].label)
  if (index != -1) return  i.value.splice(index, 1)
  console.log("0-0-0-0-0-");
  return i.value.push(i.child[vv].label)
}

// 单选
const radioGroup = (i: Custom['TradioType']['i'], vv: number) => {
  i.value = i.picker = i.child[vv].label
}

// picker 选择器
const bindPickerChange = (e: Custom['Tpicker']['e']) => {
  const item = e.target.dataset.item // 自定义字段 data-item
  const value = e.target.value // 值
  const index = item.index // 索引
  const type = item.type // 类型

  let form = formList.value[index] // 当前表单循环项

  // 下拉框
  if (type == 3) return (form.picker = value), (form.value = form.child[Number(value)])
  form.value = e.target.value
}

// 上传图片（OSS）
const uploadPic = (i: Custom['Tupload']['i']) => {
  console.log(i.value.length < i.limit ?? 1)
  tools.chooseImage().then((res: string[]) => {
    tools.getOssUrl<string[]>(res).then((url: any) => {
      if (i.value.length < (i.limit ?? 1)) return i.value.push(url)
      tools.showToast(`最多上传${i.limit ?? 1}张图片`)
    })
  })
}

// 上传视频 （OSS）
const uploadVideo = (i: Custom['Tupload']['i']) => {
  tools.chooseVideo().then((res: string) => {
    tools.getOssUrl<string[]>([res]).then((url: any) => {
      if (i.value.length < (i.limit ?? 1)) return i.value.push(url)
      tools.showToast(`最多上传${i.limit ?? 1}个视频`)
    })
  })
}

// 删除 图片|| 视频
const deleteClick = (i: Custom['TdeletePic']['i'], vv: number) => {
  tools.showModel('提示', '是否确定删除').then(() => {
    i.value.splice(vv, 1)
  })
}

// 判断必填项是否为空
const isEmpty = () => {
  let arr = []
  formList.value.forEach((item) => {
    if (item.prop) arr.push(item.value)
  })
  if (arr.some((val) => val === '' || val.length == 0)) return false
  return true
}

// 重置表单
const reset = () => {
  formList.value.forEach((i: Custom['Tform']['i']) => {
    initData(i)
  })
}

// 表单提交
const confirm = () => {
  if (!isEmpty()) return tools.showToast('请完成必填数据')
  emit('change', formList)
}

defineExpose({
  reset,
  confirm
})
</script>

<style lang="scss" scoped>
.form {
  padding: 34rpx 34rpx 0 34rpx;
  .item {
    margin-bottom: 28rpx;
    padding-bottom: 30rpx;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    &:last-child {
      border: none;
      padding-bottom: 0rpx;
    }
    .label {
      width: 220rpx;
      height: 40rpx;
      font-size: 28rpx;
    }
    .xing {
      &::before {
        content: '*';
        color: #e6425e;
        font-size: 28rpx;
        margin-left: 5rpx;
      }
    }
    .right {
      flex: 1;
      font-size: 28rpx;
      justify-content: flex-end;
      .arrow {
        width: 20rpx;
        height: 12rpx;
      }
      input {
        flex: 1;
        margin-left: 44rpx;
      }
      textarea {
        width: 420rpx;
        margin-left: 44rpx;
        margin-left: 44rpx;
      }
      .picker {
        flex: 1;
      }
      picker {
        flex: 1;
        margin-left: 44rpx;
      }
      .group {
        width: 100%;
        margin-left: 46rpx;
        justify-content: space-between;
        .group-item {
          margin-right: 22rpx;
          .check {
            width: 40rpx;
            height: 40rpx;
            border-radius: 20rpx;
            margin-right: 56rpx;
            border: 1px solid #cccccc;
          }
          .text {
            max-width: 300rpx;
            font-size: 32rpx;
            line-height: 44rpx;
            white-space: pre-wrap;
          }
        }
      }
      .upload {
        width: 100%;
        margin-left: 46rpx;
        .upload-item {
          width: 140rpx;
          height: 140rpx;
          border-radius: 6rpx;
          border: 1px solid #ddd;
          background-color: #fcfcfc;
          margin-right: 15rpx;
          margin-bottom: 10rpx;
          position: relative;
          &:nth-child(3n) {
            margin-right: 0;
          }
          image {
            border-radius: 6rpx;
          }
          .close {
            right: 0;
            top: 0;
            width: 36rpx;
            height: 36rpx;
            position: absolute;
          }
          .add {
            width: 52rpx;
            height: 52rpx;
          }
        }
      }
    }
  }
}
</style>
